<template>
  <div class="announce-wrap">
    <div class="announce" @click="toggle" v-clickoutside="hide">
      <div class="left">
        <img src="@/assets/images/announce.svg" alt="" class="icon">
        <span class="line"></span>
        <p class="p">每月首笔订单9.8折</p>
      </div>
      <div class="right">
        <svg v-show="!announceDisplay" width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" font-size="16" class="antd-mobile-icon"
          style="vertical-align: -0.125em;">
          <g id="DownOutline-DownOutline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g>
              <rect id="DownOutline-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
              <path
                d="M5.11219264,16.3947957 L22.6612572,34.5767382 L22.6612572,34.5767382 C23.2125856,35.1304785 24.0863155,35.1630514 24.6755735,34.6744571 L24.7825775,34.5767382 L42.8834676,16.3956061 C42.9580998,16.320643 43,16.2191697 43,16.1133896 L43,12.9866673 C43,12.7657534 42.8209139,12.5866673 42.6,12.5866673 C42.4936115,12.5866673 42.391606,12.6290496 42.316542,12.7044413 L23.7816937,31.3201933 L23.7816937,31.3201933 L5.6866816,12.7237117 C5.53262122,12.5653818 5.27937888,12.5619207 5.121049,12.7159811 C5.04365775,12.7912854 5,12.8946805 5,13.0026627 L5,16.1170064 C5,16.2206403 5.04022164,16.3202292 5.11219264,16.3947957 Z"
                id="DownOutline-down" fill="currentColor" fill-rule="nonzero"></path>
            </g>
          </g>
        </svg>

        <svg v-show="announceDisplay" width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" font-size="16" class="antd-mobile-icon"
          style="vertical-align: -0.125em;">
          <g id="UpOutline-UpOutline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g>
              <rect id="UpOutline-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
              <path
                d="M5.11219264,30.7053818 L22.6612572,12.5234393 L22.6612572,12.5234393 C23.2125856,11.969699 24.0863155,11.9371261 24.6755735,12.4257204 L24.7825775,12.5234393 L42.8834676,30.7045714 C42.9580998,30.7795345 43,30.8810078 43,30.9867879 L43,34.1135102 C43,34.3344241 42.8209139,34.5135102 42.6,34.5135102 C42.4936115,34.5135102 42.391606,34.4711279 42.316542,34.3957362 L23.7816937,15.7799842 L23.7816937,15.7799842 L5.6866816,34.3764658 C5.53262122,34.5347957 5.27937888,34.5382568 5.121049,34.3841964 C5.04365775,34.3088921 5,34.205497 5,34.0975148 L5,30.9831711 C5,30.8795372 5.04022164,30.7799483 5.11219264,30.7053818 Z"
                id="UpOutline-up" fill="currentColor" fill-rule="nonzero"></path>
            </g>
          </g>
        </svg>
      </div>
    </div>
    <div class="adm-popover-inner" v-show="announceDisplay">
      <div class="adm-popover-inner-content">
        <p class="adm-item">
          <i class="icon"></i>
          <span>网页端充值中，每个角色每月首笔订单可享受9.8折折扣福利</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script >
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
  name: 'announce',
  directives: { Clickoutside },
  data() {
    return {
      announceDisplay: false
    }
  },
  methods: {
    toggle() {
      this.announceDisplay = !this.announceDisplay
    },
    hide() {
      this.announceDisplay = false
    }
  }
}
</script>
<style lang="scss">
.announce-wrap {
  position: relative;

  .announce {
    margin-top: 20px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    border-radius: 10px;
    padding: 10px 20px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;

    .left {
      display: flex;
      align-items: center;
    }

    .icon {
      margin-right: 20px;
    }

    .line {
      width: 1px;
      height: 16px;
      margin: 0 10px 0 0;
      background-color: #cccccc;
    }

    .p {
      color: #333;
      font-size: 14px;
      font-weight: 500;
    }
  }

  .adm-popover-inner {
    position: absolute;
    left: 0;
    top: 65px;
    background-clip: padding-box;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(51, 51, 51, .2);
    font-size: 15px;
    width: 100%;
    min-width: 32px;
    // max-width: calc(100vw - 24px);
    overflow-y: hidden;
    z-index: 1;

    .adm-popover-inner-content {
      background-color: #fff;
      padding: 8px 12px;

      .adm-item {
        padding: 18px;
        font-size: 14px;
        color: #333;
        // .icon{

        // }
      }
    }
  }
}

.mobile-body .adm-popover-inner {
  padding: 0;
}</style>